import React, {
  Component,
  PureComponent,
  memo,
  useState,
  useEffect
} from 'react';
import axios from 'axios'
import useLoading from '../../hooks/useLoading'
import styled from 'styled-components';

interface SIprops {
  round?: boolean,
  bg?: string
}

// css in js
const BaseButton = styled.span`
  width: 200px;
  height: 45px;
  background: ${props => props.bg};
  display:block;
  border-radius: ${(props: SIprops) => props.round ? '50%' : ''}
`;

/**
 * memo
 * PuerComponent
 *
 * @param Hooks useState useEffect
 * useMemo
 * 
 * @fn react hooks 自定义hooks
 * 1. 定义一个use开头的函数
 * 2. 复用一段逻辑  （高阶组件）
 *
 */

const Home: React.FC = () => {
  let [loading, data] = useLoading()
  return <div>
    <BaseButton
      round={true}
      bg={'red'}
    ></BaseButton>
    {
      loading ? <h1>读取中...</h1> : <h1>读取结束</h1>
    }
  </div>
}

export default Home;

// interface FIprops {
//   name?: any,
//   opt?: { age: number },
//   cb?: () => void
// }

// const Bar: React.FC<FIprops> = memo((props) => {
//   // console.log("Bar----子组件-render")
//   let { opt } = props;
//   return <h1>Bar
//     {opt?.age}
//   </h1>
// })

// class Foo extends PureComponent<FIprops> {

//   // // 生命周期
//   // shouldComponentUpdate(nextProps: any, nextState: any) { // 
//   //   if (nextProps.name === this.props.name) {
//   //     return false
//   //   }
//   //   return true
//   // }
//   render() {
//     console.log("foo----子组件-render")
//     return <h1>Foo {this.props.opt?.age}</h1>
//   }
// }

// export default class Home extends Component {
//   state = {
//     count: 0,
//     opt: {
//       age: 1
//     }
//   }
//   changeFn = () => {

//   }
//   render() {
//     console.log("父组件的render")
//     let { count, opt } = this.state;
//     return <div>
//       {/* 子组件 */}
//       {/* <Foo opt={opt} cb={() => { }}></Foo> */}

//       {/* <Bar opt={opt} cb={() => { }}></Bar> */}
//       {/* 父组件 */}
//       <button onClick={() => {
//         opt.age++;
//         this.setState({
//           // count: count + 1,
//           opt
//         })
//       }}>HomeButton</button>
//     </div>
//   }
// }


